<template>
  <view>
    <uni-card>
      <view class="timeNum" style="height: 100px"
        ><span class="minu">{{ parseInt(time / 60) }}</span
        ><span class="dot">:</span
        ><span class="second">{{ parseInt(time % 60) }}</span></view
      >
    </uni-card>
    <view>
      <button @click="start()">{{ btnText }}</button><br />
      <button @click="stop()" v-if="btnText !== '开始'">{{ '终止' }}</button>
    </view>
    <!-- <view><button @click="test()">test</button></view> -->
    <view>
      <uni-card
        v-for="item in timerInfo"
        :title="`${parseInt(item.time / 60)}分${parseInt(item.time % 60)}秒`"
        :extra="item.startTime"
        :key="item.startTime"
      >
        <text>{{ item.event }}</text>
        <view class="cardDelete">
          <uni-icons
            @click="deleteTimeInfo(item.startTime)"
            type="trash"
            size="20"
            color="#eb261a"
          ></uni-icons>
        </view>
      </uni-card>
    </view>
    <view>
      <!-- 输入框示例 -->
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog
          ref="inputClose"
          mode="input"
          :title="dialogTitle"
          placeholder="请输入本次计时事由"
          @confirm="dialogInputConfirm"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
    <view>
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog
          cancelText="取消"
          confirmText="删除"
          title="确认删除此条记录吗?"
          content=""
          @confirm="dialogConfirm"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { Timer, LongAlive, getYMDHMS } from '../../utils'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      time: null,
      mytimer: null,
      btnText: '开始',
      timerInfo: [],
      dialogTitle: '',
      lastime: null,
      startTime: null
    }
  },
  computed: {
    // ...mapGetters(['timerInfo', 'count'])
  },
  onLoad() {
    // this.$watch('timerInfo', (v1, v2) => {
    //   LongAlive.setItem('timerInfo', v1)
    // })
    // this.$watch('count', (v1, v2) => {
    //   console.log(v1, v2)
    //   LongAlive.setItem('count', v1)
    // })
    this.timerInfo.push(...LongAlive.getItem('timerInfo'))
  },
  watch: {
    timerInfo(v1) {
      LongAlive.setItem('timerInfo', v1)
    }
  },
  methods: {
    start() {
      if (this.mytimer) {
        if (this.btnText == '暂停') {
          this.btnText = '继续'
          this.mytimer.pause()
          return
        }
        if (this.btnText == '继续') {
          this.btnText = '暂停'
          this.mytimer.continue()
          return
        }
        // if (this.mytimer.state == 'pause') {
        //   this.btnText = '开始'
        //   this.mytimer.end()
        // }
        return console.log('已经有了')
      }
      this.btnText = '暂停'

      let mytimer = new Timer()
      this.mytimer = mytimer
      mytimer.startCb.push(() => {
        console.log('开始了哦')
      })
      mytimer.updateCb.push(() => {
        console.log(mytimer.time + '秒')
        this.time = mytimer.time
      })
      mytimer.endCb.push(() => {
        console.log('结束了')
      })
      mytimer.start({keepAlive:true})
    },
    stop() {
      this.startTime = this.mytimer.startTime
      this.mytimer.end()
      this.mytimer = null
      this.btnText = '开始'
      let time = this.time
      this.lastime = this.time
      this.dialogTitle = `本次计时${parseInt(time / 60)}分${parseInt(
        time % 60
      )}秒`
      this.time = 0
      this.$refs.inputDialog.open()
    },
    test() {
      // console.log(this.$store.state.timerInfo)
      // this.$store.state.timerInfo.push({ date: '8000' })
      // this.$store.state.count++
      // console.log(this.$store.state.timerInfo)
      // console.log(this.timerInfo)
      // this.timerInfo.push({date:"200"})
    },
    dialogInputConfirm(val) {
      // uni.showLoading({
      // 	title: '3秒后会关闭'
      // })
      setTimeout(() => {
        // uni.hideLoading()
        // console.log(val)
        // this.value = val
        this.timerInfo.unshift({
          time: this.lastime,
          event: val,
          startTime: getYMDHMS(this.startTime)
        })
        // this.time = 0
        // 关闭窗口后，恢复默认内容
        this.$refs.inputDialog.close()
      }, 100)
    },
    deleteTimeInfo(startTime) {
      // console.log('删除', startTime)
      this.$refs.alertDialog.open('warn')
      this.lastStartTime = startTime
      // console.log('删除', this.timerInfo)
    },
    dialogConfirm() {
      // console.log('shanchu')
      this.timerInfo = this.timerInfo.filter((item) => {
        if (item.startTime === this.lastStartTime) {
          return false
        } else {
          return true
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.timeNum {
  font-size: 44px;
  text-align: center;
  line-height: 100px;
  .dot {
    // color: #ed5126;
    color: #15231b;
  }
  .minu {
    color: #69a794;
  }
  .second {
    color: #69a794;
  }
}
.cardDelete {
  width: 100%;
  margin-top: 10px;
  // height: px;
  text-align: right;
  // color: red;
  // border-top: 1px solid ;
}
</style>
